<template>
  <div>
    <w-nav-bar
      title="登录"/>
    <group>
      <x-input
        title="用户名"
        :min="4"
        :max="20"
        placeholder="请输入用户名"
        :show-clear="false"
        @on-enter="loginBtnClick"
        v-model="username"/>
      <x-input
        title="密码 "
        :min="6"
        :max="20"
        placeholder="请输入密码"
        type="password"
        :show-clear="false"
        @on-enter=loginBtnClick
        v-model="password"/>
    </group>
    <div class="w-btn-fixed-b w-max-btn">
      <x-button
        type="primary"
        @click.native="loginBtnClick"
        :show-loading="showLoading"
        :disabled="!username || !password">登录</x-button>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { XInput, Group, XButton } from 'vux'

  export default {
    name: 'SetLoginIndex',
    components: {
      XInput,
      Group,
      XButton
    },
    data() {
      return {
        /**
         * 用户名
         */
        username: '',
        /**
         * 密码
         */
        password: '',
        /**
         * 是否显示加载图标
         */
        showLoading: false
      }
    },
    computed: {
      ...mapGetters (['userModel'])
    },
    methods: {
      /**
       * 登录按钮点击
       */
      loginBtnClick() {
        this.showLoading = true
        this.$store.dispatch ('LOGIN', {
          user: this.username,
          pass: this.password
        }).w_then_finally(() => {
          this.$router.replace ('/set/root')
        }, () => {
          this.showLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
